<div class="thumbnail">
    <img src="http://placehold.it/820x230">
    <div>
        <h4 class="pull-right">{{product?.price}}元</h4>
        <h4>{{product?.title}}</h4>
        <p>{{product?.desc}}</p>
    </div>

    <div>
        <p class="pull-right">评论：{{comments?.length}}</p>
        <p>
            <app-stars [rating]="product?.rating"></app-stars>
        </p>
    </div>
</div>

<div class="thumbnail">
    <button class="btn btn-default btn-lg"
            [class.active] = "isWatched"
            (click)="watchProduct()" >
            {{isWatched?'取消关注':'关注'}}
    </button>
    <label>最新出价：{{currentBid | number:'.2-2'}}元</label>
</div>

<div class="well">
    <div>
        <button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden">发表评论</button>
    </div>
    <div [hidden] = "isCommentHidden">
        <div><app-stars [(rating)]="newRating" [readonly]="false"></app-stars></div>
        <div>
            <textarea [(ngModel)]="newComment"></textarea>
        </div>
        <div>
            <button class="btn" (click)="addComment()">提交</button>
        </div>
    </div>

    <div class="row" *ngFor="let comment of comments">
        <hr>
        <div class="col-md-12">
            <app-stars [rating]="comment.rating"></app-stars>
            <span>{{comment.user}}</span>
            <span class="pull-right">{{comment.timestamp}}</span>
            <p></p>
            <p>{{comment.content}}</p>
        </div>
    </div>
</div>